﻿
@{
    ViewBag.Title = "AddPerson";
    Layout = "~/Views/_CommonLayout.cshtml";
}

<script src="~/Framework/ext-5.0.0/src/form/field/Date.js"></script>

<div>
	<h2>Add new person:</h2>
	<div>
		@using (Html.BeginForm("AddPersonToList", "Person", FormMethod.Post, new { enctype = "multipart/form-data", role = "form" }))
		{
			<fieldset>
				@*<p>Name: <input type="text" name="name" /></p> 
				<p>Birth date: <input type="text" id="DatePicker" name="birthDate" /></p> 
				<p>Image: <input type="file" name="imageFile" /></p> 
				<p><input type="submit" value="Submit"/></p>*@ 
				
				<div class="form-group">
					<label for="personName">Name</label>
					<input name="name" type="text" class="form-control" id="personName" placeholder="Enter person name" style="width: 30%">
				</div>
				<div class="form-group" id="dateField">
					<label>Birth date</label>
				</div>
				<div class="form-group">
					<label for="photo">Select picture</label>
					<input type="file" id="photo" name="imageFile">
					<p class="help-block">Select a picture.</p>
				</div>
				<button type="submit" class="btn btn-default">Submit</button>

			</fieldset>
		}
	</div>
</div>

<script>
	Ext.onReady(
		function() {
			var element = Ext.getElementById("dateField");

			var dt = new Ext.form.field.Date({
				renderTo: element,
				//cls: 'form-control',
				format: 'd.m.Y',
				name: 'birthDate',
				width: '30%',
				emptyText: 'Birth date'
			});
		});
	
</script>